<template>
  <div class="project">
    <div class="box one">
      <img :src="img1" alt="Wheel-UI">
      <div class="intro">
        <h3>Wheel-UI</h3>
        <p>一个基于vue的UI框架</p>
        <p>技术栈：vue,webpack,scss,vuepress</p>
        <p><a href="https://zhangxq2019.github.io/vue-wheel/">项目源码</a></p>
        <p><a href="https://github.com/zhangxq2019/vue-wheel">项目预览</a></p>
      </div>
    </div>
    <div class="box two">
      <img :src="img2" alt="vue构建CNode社区">
      <div class="intro">
        <h3>vue重构CNode社区</h3>
        <p>为了熟悉vue的使用，利用开放API做了CNode社区这个项目</p>
        <p>技术栈：vue/vue-router</p>
        <p><a href="https://gitee.com/zhangxq7313/vue-cnode">项目源码</a></p>
        <p><a href="https://zhangxq7313.gitee.io/vue-cnode/dist/index.html#/">项目预览</a></p>
      </div>
    </div>
    <div class="box three">
        <img :src="img3" alt="星空todo">
        <div class="intro">
          <h3>星空todo</h3>
          <p>为了加深对小程序的掌握，做了这个打卡计时小程序</p>
          <p>功能：记录事件，完成事件，重要事件颜色醒目，可设置时间的倒计时功能</p>
          <div>
            <a href=https://github.com/zhangxq2019/todo-program>项目源码</a>
            <img class="img5" :src="img5" alt="">
          </div>
      </div>
    </div>
      <div class="box four">
        <img :src="img4" alt="胖丁唱歌">
        <div class="intro">
          <h3>胖丁唱歌</h3>
          <p>熟练掌握css中伪元素，border-radius及动画的使用</p>
          <p>功能：将css画胖丁的过程通过setInterval和innerHTML展现出来</p>
          <p><a href="https://gitee.com/zhangxq7313/jigglypuff-step">项目源码</a></p>
          <p><a href="https://zhangxq7313.gitee.io/jigglypuff-step/test/step.html">项目预览</a></p>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "project",
  data() {
    return {
      img1: require('../assets/wheel.jpg'),
      img2: require('../assets/cnode.jpg'),
      img3: require('../assets/star.jpg'),
      img4: require('../assets/puff.jpg'),
      img5: require('../assets/wx.jpg')
    }
  }
}
</script>

<style scoped>
.project {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.box {
  display: flex;
  width: 90%;
  height: 20%;
  margin: 1rem;
}
.box:nth-child(1){
  margin-top: 2rem;
}
.intro {
  margin-left: 2rem;
}
img {
  width: 8rem;
  height: 8rem;
}
.img5 {
  width: 5rem;
  height: 5rem;
}
.three {
  display: flex;
}

@media screen and (max-width:600px){
  .project,
  .box{
    font-size: 0.6rem;
  }
  img {
    width: 5rem;
    height: 5rem;
  }
  .intro {
    margin-left: 1rem;
  }
  .img5{
    width: 2rem;
    height: 2rem;
  }

}

</style>
